<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getSong"
    >
      <van-cell-group>
        <van-cell
          center
          v-for="item in playList"
          :key="item.id"
          @click="skip(item.id)"
        >
          <template #right-icon>
            <van-icon name="play-circle-o" class="suspended" />
          </template>
          <template #title>
            <div
              slot="title"
              v-html="highlight(item.name)"
              class="custom-title"
            ></div>
            <div
              slot="title"
              v-html="highlight(item.ar[0].name + item.al.name)"
              class="singerName"
            ></div>
            <div
              v-if="item.alia[0]"
              slot="title"
              v-html="highlight(item.alia[0])"
              class="singerName"
            ></div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { getSong } from '@/api/SongSearch'
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      playList: [],
      loading: false,
      finished: false,
      limit: 10,
      offset: 1
    }
  },
  created () {
    this.getSong()
  },
  mounted () {},
  methods: {
    // 获取搜索的数据
    async getSong () {
      try {
        const {
          result: { songs }
        } = await getSong({
          keywords: this.keywords,
          limit: this.limit,
          offset: (this.offset - 1) * this.limit
        })
        this.playList.push(...songs)
        // console.log(this.playList)
        const obj = {}
        this.playList = this.playList.reduce((cur, next) => {
          if (!obj[next.id]) {
            obj[next.id] = true && cur.push(next)
          }
          return cur
        }, [])
        this.loading = false
        if (songs.length) {
          this.offset++
        } else {
          this.finished = true
        }
      } catch (error) {}
    },

    // 高亮
    highlight (text) {
      const regExp = new RegExp(this.keywords, 'gi')
      const highlightStr = `<span class="active">${this.keywords}</span>`
      return text.replace(regExp, highlightStr)
    },
    skip (id) {
      this.$router.push(`/play${id}`)
    }
  }
}
</script>

<style scoped lang="less">
.suspended {
  font-size: 40px;
}
.singerName {
  font-size: 14px;
  color: #b19799;
}
</style>
